<template>
  <div class="main-table">
    <div style="margin-bottom: 30px;">
      <el-button type="primary"
               style="margin-right: 20px"
               icon="el-icon-plus"
               size="mini"
               v-perm="['inputs-add']"
               @click.native="addFill">新增录入</el-button>
      <el-tooltip content="录入操作方法?点击了解录入操作说明">
        <router-link to="/help/fill">
          <i class="el-icon-question" />
        </router-link>
      </el-tooltip>
    </div>
    <el-table style="width: 100%"
        :data="tableData"
        v-loading.body="tbLoading.loading"
        element-loading-text="加载中"
        border fit highlight-current-row
        :default-sort = "{prop: 'created_at', order: 'descending'}">
        <el-table-column prop="form_no" label="表单号" :width="device==='mobile'?'80':'200'"></el-table-column>
        <el-table-column prop="module_name" label="模块名称"></el-table-column>
        <el-table-column prop="date" label="表单日期" sortable></el-table-column>
        <el-table-column prop="created_at" label="创建时间" v-if="device!=='mobile'" sortable></el-table-column>
        <el-table-column prop="user_name" label="发起人" width="100" v-if="device!=='mobile'"></el-table-column>
        <el-table-column prop="status_name" label="状态" :width="device==='mobile'?'60':'100'">
          <template slot-scope="scope">
            <el-tag type="danger" size="mini">{{scope.row.status_name}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作"  :width="device==='mobile'?'80':'150'">
          <template slot-scope="scope">
            <el-tooltip content="编辑录入信息" placement="top">
              <el-link
                icon="el-icon-edit"
                v-perm="['inputs-update']"
                @click="editFill(scope.$index,scope.row)">编辑</el-link>
            </el-tooltip>
            <span style="margin:10px" v-perm="['inputs-delete']"  v-if="device!=='mobile'">|</span>
            <el-tooltip content="删除录入信息" placement="top">
              <el-link
                type="danger"
                icon="el-icon-delete"
                v-perm="['inputs-delete']"
                @click="delReportData(scope.$index,scope.row)">删除</el-link>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-bottom: 30px;"></div>
      <!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tablePage.current"
        :page-sizes="[20, 30, 40, 50, 60]"
        :page-size="tablePage.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tablePage.total">
      </el-pagination>
  </div>

</template>

<script>
  import {resetTemp,parseTime} from "@/utils"
  import dailyApi from "@/api/daily_data"
  import {mapGetters} from 'vuex'
  export default {
    name: "fillRecords",
    props:{
      tbLoading:{
        type:Object,
        required:true
      },
      tablePage:{
        type:Object,
        required:true
      },
      tableQuery:{
        type:Object,
        required:true
      }
    },
    computed:{
      ...mapGetters([
        'device'
      ])
    },
    data(){
      return {
        tableData:[]
      }
    },
    methods:{
      fetchData(current=null){
        if(current){
          this.tablePage.current = current
        }
        if (!this.tableQuery.orgnization_id)
          return
        this.tbLoading.loading=true
        dailyApi.dailyInputQuery(this.tableQuery, this.tablePage).then(res => {
          let userdata = res.data
          this.tableData = userdata.data
          this.tablePage.total=userdata.total
          if(!this.tablePage.current)
            this.tablePage.current=1
          if (!this.tablePage.size)
            this.tablePage.size=20
          this.tbLoading.loading= false
        }).catch(err=>{
          this.tableData=[]
          resetTemp(this.tablePage)
          this.tbLoading.loading=false
        })

      },
      handleSizeChange(val) {
        this.tablePage.size = val;
        this.fetchData();
      },
      handleCurrentChange(val) {
        this.tablePage.current = val;
        this.fetchData();
      },
      addFill(){
        this.$emit('fill-add')
      },
      editFill(idx,row){
        this.$emit('fill-edit',idx,row)
      },
      delReportData(idx,row){
        this.$emit('fill-del',idx,row)
      }
    }

  }
</script>

<style scoped lang="scss">
  .main-table{
    width: 100%;
  }
  .field-header-col{
    text-align: center;
  }

</style>
